@use "../../../../../../../../tokens";

.main {
  flex-direction: column;
}

.contentWrapper {
  max-width: tokens.$content-md;
  margin: 0 auto;
  text-align: center;
}

.buttonsWrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: tokens.$spacing-md;

  a {
    display: block;
  }

  @media screen and (min-width: tokens.$screen-sm) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

.upgradeToggleWrapper {
  display: block;
  margin-bottom: tokens.$spacing-lg;

  > span {
    display: block;
  }
}

.removalStepsList {
  font: tokens.$text-body-md;
  text-align: left;

  li {
    margin-bottom: tokens.$spacing-md;

    > strong {
      display: block;
      margin-bottom: tokens.$spacing-xs;
      font-weight: 700;
    }

    // The subhead/bullet content is wrapped in a span to style to OL marker (1.)
    > span {
      font: tokens.$text-body-sm;
      font-weight: normal;
    }
  }
}

.content {
  text-align: center;
  max-width: tokens.$content-md;
  margin: 0 auto tokens.$spacing-2xl;

  h3 {
    font: tokens.$text-title-2xs;
  }

  h4 {
    font: tokens.$text-title-3xs;
  }

  p,
  h3 {
    margin-block-end: tokens.$spacing-md;
  }

  h3 + p {
    text-align: left;
  }

  > a {
    color: tokens.$color-blue-60;
    display: inline-block;
    margin-inline-start: tokens.$spacing-sm;
  }
}

.cityScape {
  margin: 0 auto tokens.$spacing-2xl;
  display: block;
  max-width: 100%;
}

.questionTooltipWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: tokens.$spacing-xs;
  font: tokens.$text-title-3xs;
}

.questionTooltip {
  @include tokens.question-mark-circle-btn;
}

.contentAutomaticRemove {
  h3 {
    @include tokens.no-focus-outline;
    text-align: left;
  }
}

.featuresList {
  text-align: left;
  max-width: tokens.$content-sm;
  margin-bottom: tokens.$spacing-lg;

  ul {
    padding: 0;
    li {
      background: url("../images/icon-check-mark.svg") no-repeat left center;
      padding: tokens.$spacing-sm 0 tokens.$spacing-sm tokens.$spacing-xl;
      list-style: none;
      margin: 0;
      vertical-align: middle;
    }
  }
}

.upgradeToggle {
  width: auto;
  display: inline-flex;
  gap: tokens.$spacing-sm;
  background-color: tokens.$color-grey-10;
  border-radius: tokens.$border-radius-xl;
  padding: tokens.$spacing-sm tokens.$spacing-sm;
  font: tokens.$text-body-sm;
  margin-bottom: tokens.$spacing-md;

  .toggleBtn {
    cursor: pointer;
    appearance: none;
    background-color: transparent;
    border: 0;
    color: tokens.$color-grey-50;
    padding: tokens.$spacing-xs tokens.$spacing-md;
    font-weight: 500;

    &.isActive,
    &:hover {
      background-color: tokens.$color-white;
      border-radius: tokens.$border-radius-xl;
      color: tokens.$color-informational;
    }

    &.isFocused {
      outline: 2px solid tokens.$color-purple-70;
      background-color: tokens.$color-purple-10;
    }
  }
}

.upgradeContentWrapper {
  @media screen and (min-width: tokens.$screen-md) {
    display: flex;
    gap: tokens.$spacing-md;
    justify-content: space-between;
    // Used to stop purple box from stretching full width
    align-items: flex-start;
  }

  .selectedPlan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    background-color: tokens.$color-purple-70;
    color: tokens.$color-white;
    padding: tokens.$spacing-lg;
    // Note: Confirmed with design to only round the top-right corner
    border-top-right-radius: tokens.$border-radius-xl;
    > strong {
      text-align: center;
      display: block;
      font: tokens.$text-body-xl;
      small {
        display: block;
        font: tokens.$text-body-md;
      }
    }
    // Price block
    > span {
      margin: tokens.$spacing-xl 0;
      font: tokens.$text-title-sm;
      font-weight: 500;
    }

    // Invert color for the plan selection CTA to increase visibility
    // against the purple background.
    & > a {
      color: tokens.$color-white;
      box-shadow: inset 0 0 0 2px tokens.$color-white;

      &:hover {
        background-color: tokens.$color-white;
      }
    }
  }
}

.dataBrokerResolutionStats {
  display: flex;
  flex-direction: column;
  gap: tokens.$spacing-md;
  justify-content: center;
  padding-top: tokens.$layout-sm;

  @media screen and (min-width: tokens.$screen-md) {
    flex-direction: row;
  }
  div {
    @include tokens.estimated-time;
    justify-content: center;
  }
}
